<template>
  <el-row :gutter="5" class="wu-login-login-time">
    <el-col :span="6">{{ hour }}</el-col>
    <el-col :span="3">:</el-col>
    <el-col :span="6">{{ minute }}</el-col>
    <el-col :span="3">:</el-col>
    <el-col :span="6">{{ seconds }}</el-col>
  </el-row>
</template>

<script>
export default {
  name: "CurrentTime",
  data() {
    return {
      currentTime: new Date(),
      hour: '',
      minute: '',
      seconds: '',
    }
  },
  mounted() {
    let that = this;
    setTimeout(() => {
      that.currentTime = new Date()
      that.hour = that.currentTime.getHours()
      that.minute = that.currentTime.getMinutes()
      that.seconds = that.currentTime.getUTCSeconds().toString() < 2 ? '0' + that.currentTime.getUTCSeconds() : that.currentTime.getUTCSeconds()
    }, 1000);
  },
  watch: {
    currentTime() {
      let that = this
      setTimeout(() => {
        that.currentTime = new Date()
        that.hour = that.currentTime.getHours()
        that.minute = that.currentTime.getMinutes()
        that.seconds = that.currentTime.getUTCSeconds().toString().length < 2 ? '0' + that.currentTime.getUTCSeconds() : that.currentTime.getUTCSeconds()
      }, 1000);
      setTimeout(() => {
        that.showContainer = true
      }, 1000 * 3)
    }
  },
}
</script>

<style scoped>

</style>
